<script setup>
import { ref } from "vue";
import { useUserInfoStore } from "../../stores/userInfo.js";
import { UserFilled } from '@element-plus/icons-vue';
const circleUrl = '../../assets/透明.png'
const userInfoStore = useUserInfoStore();
let userInfo = ref({
    nickname: "",
    studentId: "",
    major: "",
    class: "",
    username: "",
    email: ""
});
async function getUserInfo() {
    await userInfoStore.getUserInfoData()
    userInfo.value = userInfoStore.myInfo
    console.log(userInfo.value);
}

getUserInfo()
</script>

<template>
    <el-avatar :icon="UserFilled" />
    <span>{{ userInfo.username }}</span>
    <ul>
        <li>姓名：{{ userInfo.nickname }}</li>
        <li>学号：{{ userInfo.studentId }}</li>
        <li>专业：{{ userInfo.major }}</li>
        <li>班级：{{ userInfo.class }}</li>
    </ul>
</template>

<style scoped>
li {
    font-size: 20px;
    margin-top: 20px;
}

span {
    margin-left: 10px;
}
</style>